<template>
  <div>
    <div class="heart-wrap">
      <div>
        <span class="heart-num active">{{heartChartData.incomingData||0}}</span>
        <span class="heart-name active">{{$t('public.callIn')}}</span>
      </div>
      <div>
        <span class="heart-num">{{heartChartData.incomingCompleteData||0}}</span>
        <span class="heart-name">{{$t('monitor.callIncoming')}}</span>
      </div>
      <div>
        <span class="heart-num">{{heartChartData.queueData||0}}</span>
        <span class="heart-name">{{$t('monitor.listing')}}</span>
      </div>
      <div>
        <span class="heart-num">{{heartChartData.outboundData||0}}</span>
        <span class="heart-name">{{$t('public.callOut')}}</span>
      </div>
      <div>
        <span class="heart-num">{{heartChartData.outboundCompleteData||0}}</span>
        <span class="heart-name">{{$t('monitor.callOut')}}</span>
      </div>
    </div>
    <highcharts :options="monitorHeartChart" ref="highchart"></highcharts>
  </div>
</template>
<script>
  import Highcharts from 'highcharts'
  Highcharts.setOptions({
    global: {
      useUTC: false
    }
  })
  function activeLastPointToolip (chart) {
    var points = chart.series[0].points
    if (points.length) {
      chart.tooltip.refresh(points[points.length - 1])
    }
  }
  export default {
    name: 'MonitorHeart',
    data () {
      let self = this
      return {
        reload: false,
        currentMaxY: {num: 0, time: new Date().getTime()},
        heartChartLoaded: null,
        heartChartData: {
          incomingData: 0,
          incomingCompleteData: 0,
          queueData: 0,
          outboundData: 0,
          outboundCompleteData: 0
        },
        monitorHeartChart: {
          chart: {
            animation: Highcharts.svg, // don't animate in old IE
            marginRight: 10,
            events: {
              load: function () {
                // set up the updating of the chart each second
                self.heartChartLoaded = true
                activeLastPointToolip(this)
              }
            }
          },
          title: {
            text: ''
          },
          xAxis: {
            type: 'datetime',
            crosshair: {
              zIndex: 5,
              color: '#19bc9f',
              width: 1
            },
            gridLineColor: '#fff',
            minTickInterval: 15 * 60 * 1000,
            minRange: 60 * 60 * 6 * 1000,
            labels: {
              formatter: function () {
                return Highcharts.dateFormat('%H:%M', this.value)
              }
            }
          },
          yAxis: {
            title: {
              text: ''
            },
            allowDecimals: false,
            ceiling: 10,
            gridLineColor: '#fff',
            crosshair: {
              zIndex: 5,
              color: '#19bc9f',
              width: 1
            },
            plotLines: [{
              value: 0,
              width: 1,
              color: '#808080'
            }]
          },
          tooltip: {
            hideDelay: 80000
          },
          legend: {
            enabled: true
          },
          credits: {
            enabled: false
          },
          exporting: {
            enabled: false
          },
          series: [{
            name: self.$t('public.callIn'),
            type: 'areaspline',
            color: '#a1bad0',
            fillColor: '#e1effa',
            animation: false,
            tooltip: {
              headerFormat: '',
              pointFormatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                  Highcharts.dateFormat('%Y-%m-%d %H:%M', this.x) + '<br/>' +
                  this.y
              }
            },
            events: {
              mouseOut: function () {
                let chart = this.chart
                activeLastPointToolip(chart)
              },
              legendItemClick: function (event) {
                return false
              }
            },
            data: []
          },
          {
            name: self.$t('monitor.maxCallInLimit'),
            type: 'areaspline',
            color: '#ed5770',
            fillColor: 'rgba(0,0,0,0)',
            animation: false,
            tooltip: {
              headerFormat: '',
              pointFormat: '{series.name}: <b>{point.y}</b><br/>'
            },
            events: {
              mouseOut: function () {
                let chart = this.chart
                activeLastPointToolip(chart)
              }
            },
            data: []
          }]
        },
        incomingChartData: [],
        maxCallsChartData: []
      }
    },
    computed: {
      updateheartChart () {
        let pbx = this.$store.state.session.user.pbx
        let data = this.$store.state.monitor.table.phone_heartBeat
        return data[pbx]
      }
    },
    components: {
    },
    methods: {
      generateHeartChart () {
//        let that = this
        this.$store.dispatch('initHeartBeat').then((res) => {
          if (!res.Succeed) {
            return
          }
          // 每分钟呼入数
          let incomingData = res.IncomingData
          // 呼入并发
          let maxInComingCalls = res.MaxInComingCalls
          this.heartChartData.maxInComingCalls = maxInComingCalls
          this.heartChartData.incomingData = res.ctIncomingData
          this.heartChartData.incomingCompleteData = res.ctIncomingCompleteData
          this.heartChartData.queueData = res.ctQueueData
          this.heartChartData.outboundData = res.ctOutboundData
          this.heartChartData.outboundCompleteData = res.ctOutboundCompleteData
          this.incomingChartData = []
          this.maxCallsChartData = []
          // 数据补足补0
          if (incomingData.length < 360) {
            let item = incomingData[0].split(':')
            let time = parseInt(item[0])
            for (let i = 0; i < 360 - incomingData.length; i++) {
              this.incomingChartData.push({
                x: time - 60000,
                y: 0
              })
              this.maxCallsChartData.push({
                x: time - 60000,
                y: maxInComingCalls
              })
            }
          }
          for (let i = 0; i < incomingData.length; i++) {
            let item = incomingData[i].split(':')
            let time = parseInt(item[0])
            let num = parseInt(item[1])
            // 取最大的呼入值
            if (item[1] >= this.currentMaxY.num) {
              this.currentMaxY = {num, time}
            }
            this.incomingChartData.push({
              x: time,
              y: num
            })
            this.maxCallsChartData.push({
              x: time,
              y: maxInComingCalls
            })
          }
          this.monitorHeartChart.series[0].data = this.incomingChartData
          this.monitorHeartChart.series[1].data = this.maxCallsChartData
          this.monitorHeartChart.yAxis.ceiling = this.currentMaxY.num + 10
        })
      },
      maxCallNum (data, chart) {
        let maxCall = data.split(':')
        let time = parseInt(maxCall[0])
        let num = parseInt(maxCall[1])
        if (num >= this.currentMaxY.num) {
          this.currentMaxY = {num, time}
        }
      },
      reflow () {
        if (this.$refs.highchart) {
          this.$refs.highchart.chart.reflow()
          activeLastPointToolip(this.$refs.highchart.chart)
        }
      }
    },
    watch: {
      updateheartChart: {
        deep: true,
        handler (newV) {
          let data = newV
          let chart = this.heartChartLoaded
          if (chart && data) {
            let x = parseInt(data.incomingData.split(':')[0]) // current time
            let y = parseInt(data.incomingData.split(':')[1])
//            series[0].addPoint([x, y], false, true)
//            series[1].addPoint([x, this.heartChartData.maxInComingCalls], false, true)
            this.incomingChartData.push({x, y})
            this.maxCallsChartData.push({x, y: this.heartChartData.maxInComingCalls})
            this.incomingChartData.shift()
            this.maxCallsChartData.shift()
            if (y >= this.currentMaxY.num) {
              this.currentMaxY = {num: y, time: x}
            }
            this.monitorHeartChart.series[0].data = this.incomingChartData
            this.monitorHeartChart.series[1].data = this.maxCallsChartData
            this.monitorHeartChart.yAxis.ceiling = this.currentMaxY.num + 10
            this.heartChartData.incomingData = y
            this.heartChartData.incomingCompleteData = data.incomingCompleteData
            this.heartChartData.queueData = data.queueData
            this.heartChartData.outboundData = data.outboundData
            this.heartChartData.outboundCompleteData = data.outboundCompleteData
          }
        }
      },
      '$store.state.navMenuState' () {
        if (this.$refs.highchart) {
          this.$refs.highchart.chart.reflow()
          activeLastPointToolip(this.$refs.highchart.chart)
        }
      }
    },
    created () {
      this.generateHeartChart()
    },
    activated () {
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../../assets/common.styl';
  .heart-wrap
    padding 0 300px
    display flex
    justify-content space-between
    text-align center
  .heart-num
    display block
    font-size 26px
    padding-bottom 6px
  .heart-name
    font-size 14px
  .heart-num.active
    color $c-main
  .heart-name.active
    color $c-main
</style>
